<template>
    <div class="my-voucherInfo background" :style="{height: `${screenHeight}px`}">
        <img class="my-voucherInfo-img" src="@/assets/img/my/my_voucher_info_bg@2x.png">
        <div class="my-voucherInfo-code">
            <h3>{{listData.registration.title}}</h3>
            <div class="my-voucherInfo-code-time"><img class="my-voucherInfo-img" src="@/assets/img/my/my_voucher_info_time.png">报名时间:
            {{listData.registration.activityStartTime}} ~ {{listData.registration.activityEndTime}}
            </div>
            <h4>报名凭证</h4>
            <div class="my-voucherInfo-code-codeImg"><img :src="listData.codeImage" alt="二维码生成失败"></div>
            <div>数字码：{{listData.code}}</div>
        </div>
        <div class="my-voucherInfo-content">
            <div>参与者：{{listData.registrationUser.nickName}}</div>
            <div>报名时间：{{listData.createTime}}</div>
            <div>报名费用：{{listData.registration.cost}}元</div>
            <div class="my-voucherInfo-content-btn">长按保存二维码到手机</div>
        </div>
        <div class="my-voucherInfo-Tips" style="color:#ccc">
            <div>注意:</div>
            <p>1.请不要把凭证随意分享给他人，以免被盗用</p>
            <p>2.线下活动入场时，请展示凭证给活动发起人校验</p>
        </div>
    </div>
</template>

<script>
    import {getVoucherInfoDate} from '../../api/request.js'
    import { setStore, getStore } from '../../assets/js/utils.js'
    export default {
        name: "VoucherInfo",
        data() {
            return{
                userId:'',
                pageNo:1,
                registrationId:'',
                listData:{
                    codeImage:'',
                    code:'',
                    registration:{
                        title:'',
                        registrationStartTime:'',
                        cost:'',
                    },
                    registrationUser:{
                        nickName:''
                    }
                }
            }
        },
        computed: {
            screenHeight() {
                return window.innerHeight-60;
            }
        },
        created(){
            if(this.$route.params.id){
                this.registrationId =this.$route.params.id
            }else{
                this.$router.push('/my')
            }
            let userId = getStore('userId');
            let user = getStore('user');
            if(userId && user){
                this.userId = userId;
            }else{
                var fhUrl = window.location.href;
                setStore('fhUrl', fhUrl);
                this.$router.push('/wxLogin')
            }
            this.$store.commit('UPDATE_PAGE_TITLE', '凭证详情');
            this.$store.commit('UPDATE_BACKSHOW', false);
            this.$store.commit('UPDATE_FOOTER', false);
            this._getVoucherInfoDate();
        },
        mounted() {},
        methods:{
            _getVoucherInfoDate() {
                getVoucherInfoDate(this.userId,this.registrationId,this.pageNo).then((res) => {
                    if(res.code == 1){
                         res.data[0].codeImage = "data:img/jpg;base64," + res.data[0].codeImage
                        this.listData = res.data[0]
                    }
                }).catch((err) => {
                    console.log(err)
                })
            }
        },
    }
</script>

<style scoped lang="scss">
.my-voucherInfo{
    margin-top: 40px;
    padding: 10px;
    &-img{
        width:100%;
    }
    &-code{
        box-sizing: border-box;
        padding: 10px;
        margin: 0 auto;
        background-color: white;
        width:92%;margin-top: -4px;
        border-radius: 0 0 10px 10px;
        border-bottom: 1px dotted #FFBE00;
        h3{
            text-align: left;
        }
        &-time{
            text-align: left;
            padding: 5px 0;
            color:#666666;
            img{
                width:20px;
                position: relative;
                top: 5px;
            }
        }
        &-codeImg{
            max-width:60%;
            margin: 0 auto;
        }
        :last-child{
            color:#666666;
        }
    }
    &-content{
        box-sizing: border-box;
        text-align: left;
        margin: 0 auto;
        background-color: white;
        width:92%;
        border-radius: 10px;
        padding: 10px;
        div{
            padding: 5px;
        }
        &-btn{
            margin: 0 auto;
            width:80%;
            border-radius: 20px;
            background-color: #FFBE00;
            text-align: center;
            color: white;
            padding: 10px;
            margin-top: 10px;
        }
    }
    &-Tips{
        padding:  5px 20px;
        color:#767676;
        text-align: left;
        font-size: 12px;
    }
}
</style>